/**
 * 代码库详情的顶部操作栏
 * TODO 文件浏览也应使用此组件
 * 左侧为分支切换器和当前路径，右侧为可传入的按钮组
 * @param {string} branches 分支（必填）调分支接口返回的数据
 * @param {string} resourcePath 路径（可选）默认为 window.FORCE.resourceSubject.path
 * @param {string} toolbarRightJsx 操作栏右侧的区域（可选）需传入一组 Toolbar.Item
 * @param {string} toolbarLeftJsx 操作栏左侧追加区域（可选）需传入一组 Toolbar.Item
 * @param {boolean} isBorderTop 默认为底部边框，加这个参数变为顶部边框
 * @return {element} ProjectPathToolbar组件
 */

import React from 'react';
import PropTypes from 'prop-types';
import BranchAndTagSelect from 'components/branchAndTagSelect';
import utils from 'utils';
import Nav from './nav';
import './index.scss';

const { pathResource, resourceSubject } = window.FORCE;

export default class ProjectPathToolbar extends React.Component {
  static propTypes = {
    resourcePath: PropTypes.string,
    onBranchAndTagSelectChange: PropTypes.func,
  };

  static defaultProps = {
    resourcePath: resourceSubject.path,
    onBranchAndTagSelectChange: () => {},
  };

  render() {
    const {
      resourcePath = resourceSubject.path,
      blameLeftJsx,
      blameRightJsx,
      isBorderTop,
      isInRouter,
      onBranchAndTagSelectChange,
    } = this.props;
    const resourceSubjectPathArr = resourcePath.split('/');

    return (
      <div className={`files-toolbar ${isBorderTop && 'isBorderTop'}`}>
        <div className="display-type">
          <div className="display-type r12">
            <BranchAndTagSelect {...this.props} onChange={onBranchAndTagSelectChange} />
          </div>
          <div className="display-type">
            <Nav
              to={`/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(
                resourceSubject.revision,
              )}`}
              isInRouter={isInRouter}
              style={{ fontWeight: 'bold' }}
            >
              {pathResource.fullPath.split('/')[1]}
            </Nav>{' '}
            {resourceSubjectPathArr.length >= 7 && '/ ... '}
            {resourceSubjectPathArr.length < 7
              ? resourceSubjectPathArr.map((item, index) => (
                <span>
                  /{' '}
                  {index === resourceSubjectPathArr.length - 1 ? (
                    <span>{item}</span>
                    ) : (
                      <Nav
                        to={`/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(
                          resourceSubject.revision,
                        )}/${resourceSubjectPathArr.slice(0, index + 1).join('/')}`}
                        isInRouter={isInRouter}
                      >
                        {item}{' '}
                      </Nav>
                    )}
                </span>
                ))
              : resourceSubjectPathArr.map((item, index) => {
                  if (index < resourceSubjectPathArr.length - 2) {
                    return false;
                  }
                  return (
                    <span>
                      /{' '}
                      {index === resourceSubjectPathArr.length - 1 ? (
                        <span>{item}</span>
                      ) : (
                        <Nav
                          to={`/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(
                            resourceSubject.revision,
                          )}/${resourceSubjectPathArr.slice(0, index + 1).join('/')}`}
                          isInRouter={isInRouter}
                        >
                          {item}{' '}
                        </Nav>
                      )}
                    </span>
                  );
                })}
          </div>
          {blameLeftJsx && blameLeftJsx}
        </div>
        {blameRightJsx}
      </div>
    );
  }
}
